<template>
  <!--  头部-->
  <div>
  <nav class="navbar navbar-dark bg-dark" style="background: #354555">
    <div class="container-fluid" >
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">

        <a class="navbar-brand" href="#">土壤墒情监控平台</a>
      </div>
    </div><!-- /.container-fluid -->
  </nav>
<!--  左侧导航栏-->
  <div>
    <el-row class="tac" :gutter="20">
      <el-col :span="4">

        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          background-color="#44515E"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="width: 180px; height: 100%">
          <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span>监测首页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">GIS</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-menu"></i>
            <span slot="title">数据查询</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-menu"></i>
            <span slot="title">曲线分析</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-menu"></i>
            <span slot="title">预警控制</span>
          </el-menu-item>
          <div class="dang"></div>
        </el-menu>
      </el-col>
      <el-col :span="19" style="margin-top: 10px">
        <!--    监测首页-->
        <monitor v-if="showMonitor"></monitor>
        <!--    GIS-->
        <GIS v-if="showGIS"></GIS>
        <!--    数据查询-->
        <Data v-if="showData"></Data>
        <!--    曲线分析-->
        <Analysis v-if="showAnalysis"></Analysis>
        <!--    预警控制-->
        <warning v-if="showWarning"></warning>
      </el-col>
    </el-row>
    <router-view/>
  </div>

  </div>

</template>

<script>
  // 导入页面
  import monitor from './monitor'
  import Analysis from './Analysis'
  import GIS from './GIS'
  import warning from './warning'
  import Data from './Data'

  export default {
        components:{monitor, Analysis, GIS, warning, Data},  // 注册页面
        name: "main.vue",
        data(){
          return{
            showMonitor: true,
            showAnalysis: false,
            showGIS: false,
            showWarning: false,
            showData: false,
          }
        },

        methods: {
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          handleSelect (val) {
            console.log(val)
            if (val === '1') {
              this.showMonitor = true
              this.showAnalysis = false
              this.showData = false
              this.showGIS = false
              this.showWarning = false
            } if (val === '2') {
              this.showMonitor = false
              this.showAnalysis = false
              this.showData = false
              this.showGIS = true
              this.showWarning = false
            } if (val === '3') {
              console.log("jjjjj")
              this.showMonitor = false
              this.showAnalysis = false
              this.showData = true
              this.showGIS = false
              this.showWarning = false
            } if (val === '4') {
              this.showMonitor = false
              this.showAnalysis = true
              this.showData = false
              this.showGIS = false
              this.showWarning = false
            } if (val === '5') {
              this.showMonitor = false
              this.showAnalysis = false
              this.showData = false
              this.showGIS = false
              this.showWarning = true
            }
          }

        }
    }

</script>

<style scoped>
  .dang{
    width: 179px;
    background: #44515E ;
    height: 400px;
  }
</style>
